<template>
  <div
    v-loading="loading"
    element-loading-text="正在查找.."
    element-loading-spinner="el-icon-loading"
  >
    <div class="head-bg head-content">
      <div class="big-img"><el-image :src="headBg" fit="cover"></el-image></div>
      <div class="content">
        <div class="big-title">政策匹配系统</div>
        <div class="input-container">
          <el-input
            placeholder="请输入内容"
            v-model="searchInput"
            class="input-with-select"
            ><el-button slot="append" type="warning"
              >快速评估</el-button
            ></el-input
          >
        </div>
        <div class="sub-title">
          点击快速评估,快来看看您公司可有享受哪些优惠政策吧！
        </div>
      </div>
    </div>
    <div class="content-container">
      <div class="content">
        <div class="select-container">
          <RouterSelectStrip
            :active-id.sync="queryParams.level"
            :screenList="policyLevelList"
            label="政策级别"
            @itemClick="policyLevelItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.policySystem"
            :screenList="policySystemList"
            label="政策体系"
            @itemClick="policySystemItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.field"
            :screenList="positionList"
            label="所属领域"
            @itemClick="positionItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            listPropVName="dictLabel"
            :active-id.sync="queryParams.year"
            :screenList="yearList"
            label="发布时间"
            @itemClick="yearItemClick"
          />
        </div>

        <div class="search-container">
          <div class="search-box">
            <el-input placeholder="请输入内容" v-model="queryParams.title">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append" @click.stop="getList"
                >搜索</span
              >
            </el-input>
          </div>
          <el-button
            :disabled="isCanReset"
            type="primary"
            class="ml-4"
            @click="resetSearch"
          >
            重置搜索
          </el-button>
        </div>

        <ul class="info-list">
          <li
            v-for="item in list"
            :key="item.id"
            class="item"
            @click="handleItemClick(item)"
          >
            <div class="head">
              <div class="left">
                <el-tag :type="statusColor(item.status)">{{
                  statusText(item.status)
                }}</el-tag>
                <div class="title">{{ item.title }}</div>
              </div>

              <div class="right">
                <span
                  v-if="item.leftDay != null && item.leftDay > 0"
                  class="margin-left-xs tag2"
                  >剩{{ item.leftDay }}天</span
                >
                <span v-if="item.status == 1" style="color: #f92b00;">
                  距离申报截止
                  <span class="bold">{{
                    calcCloseTime(item.startTime, item.endTime)
                  }}</span>
                  天
                </span>

                <span
                  v-if="item.status == 0 || !item.status"
                  style="color: #999999;"
                  >未开始</span
                >
                <span v-if="item.status == 2" style="color: #999999;"
                  >已结束</span
                >
              </div>
            </div>

            <div class="bottom">
              <div class="left">来源：{{ item.source }}</div>
              <div class="right">
                {{ item.acceptanceTime }} — {{ item.closeTime }}
              </div>
            </div>
          </li>
        </ul>
        <div
          v-if="list.length <= 0"
          class="pb-8 m-auto text-xl text-center text-gray-500"
        >
          暂无数据
        </div>
        <pagination
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getPolicyList } from '@/api/policy.js'
import HeadScreenStrip from '@/components/HeadScreenStrip/index.vue'
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'

export default {
  name: 'policy',
  components: {
    HeadScreenStrip,
    RouterSelectStrip,
  },
  data() {
    return {
      headBg: require('@/assets/page-head/policy.png'),

      // 加载状态
      loading: false,

      // 搜索条件
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        level: undefined,
        policySystem: undefined,
        field: undefined,
        year: undefined,
        title: undefined,
      },

      // 搜索输入参数
      searchInput: '',
      // 列表总条数
      tableTotal: 0,
      // 列表
      list: [],

      /* 搜索条件列表 */
      // 政策级别
      policyLevelList: [],
      // 政策体系
      policySystemList: [],
      // 行业领域
      positionList: [],
      // 发布时间
      yearList: [
        { dictValue: 0, dictLabel: '2021' },
        { dictValue: 1, dictLabel: '2020' },
        { dictValue: 2, dictLabel: '2019' },
        { dictValue: 3, dictLabel: '2018' },
      ],
      /* END */

      // 状态列表
      statusList: [
        { id: 0, statusText: '未开始' },
        { id: 1, statusText: '进行中' },
        { id: 2, statusText: '已结束' },
      ],
    }
  },
  computed: {
    isCanReset() {
      let query = this.queryParams
      let { title, level, field, year } = query
      return !title && !level && !field && (!year || year === '全部')
    },
    // 状态文字
    statusText() {
      return (statusId) => {
        if (!statusId) {
          return '未开始'
        }

        let resArr = this.statusList.filter((item) => {
          return item.id === parseInt(statusId)
        })
        return resArr[0]['statusText']
      }
    },
    // 状态配色
    statusColor() {
      return (statusId) => {
        let res = ''
        switch (statusId) {
          case 0:
            res = ''
            break
          case 1:
            res = 'warning'
            break
          case 2:
            res = 'info'
            break
          default:
            res = 'info'
            break
        }
        return res
      }
    },
    // 计算剩余天数
    calcCloseTime() {
      return (acceptanceTime, closeTime) => {
        let beginDate = new Date(acceptanceTime).getTime()
        let endDate = new Date(closeTime).getTime()
        let days = (endDate - beginDate) / (1 * 24 * 60 * 60 * 1000)
        return Math.ceil(days)
      }
    },
    // 时间是否过期
    // @params {string} startTime
    // @params {string} endTime
    timeText() {
      return (startTime, endTime) => {
        let startTimeV = -1
        let endTimeV = Infinity
        let nowTimeV = new Date().valueOf()
        if (startTime) {
          startTimeV = new Date(startTime).valueOf()
        }
        if (endTime) {
          endTimeV = new Date(endTime).valueOf()
        }
        if (nowTimeV < startTimeV) {
          return { name: '未开始', className: 'text-gray-400' }
        } else {
          if (nowTimeV > endTimeV) {
            return { name: '已结束', className: 'text-red-400' }
          }
          return { name: '已开始', className: 'text-blue-400' }
        }
      }
    },
  },
  mounted() {
    /*
     * 获取当前session内的字典缓存
     * 先得到当前所需的字典的缓存，然后判断其是否存在。
     * 如果存在则直接放入变量内显示，否则置空
     * 此处处理用于下面判断是否请求接口获取字典数据
     */
    let policyLevelJson = sessionStorage.getItem('policy_level')
    let policySystemJson = sessionStorage.getItem('policy_system')
    let positionJson = sessionStorage.getItem('user_common_field')

    this.policyLevelList =
      policyLevelJson && policyLevelJson != '{}'
        ? JSON.parse(policyLevelJson).data
        : []
    this.policySystemList =
      policySystemJson && policySystemJson != '{}'
        ? JSON.parse(policySystemJson).data
        : []
    this.positionList =
      positionJson && positionJson != '{}' ? JSON.parse(positionJson).data : []
    /* END */

    // 初始化
    this.init()
  },
  methods: {
    // 初始化
    init() {
      // 获取字典
      this.getSearchList()
      // 获取列表
      this.getList()
    },

    // 获取搜索条件列表
    getSearchList() {
      // 获取政策级别
      if (!this.policyLevelList.length) {
        this.getDictList('policy_level').then((res) => {
          if (res.code == 200) {
            this.policyLevelList = res.data
          }
        })
      }

      // 获取政策体系
      if (!this.policySystemList.length) {
        this.getDictList('policy_system').then((res) => {
          if (res.code == 200) {
            this.policySystemList = res.data
          }
        })
      }

      // 获取行业领域
      if (!this.positionList.length) {
        this.getDictList('user_common_field').then((res) => {
          if (res.code == 200) {
            this.positionList = res.data
          }
        })
      }
    },

    // 获取列表数据
    getList(isRest) {
      if (isRest === 1) {
        this.queryParams.pageNum = 1
      }
      this.loading = true
      let queryParams = {
        ...this.queryParams,
      }
      console.log('queryParams')
      console.log(queryParams)
      queryParams.level = queryParams?.level && parseInt(queryParams.level)
      queryParams.field = queryParams?.field && parseInt(queryParams.field)
      queryParams.year =
        (queryParams?.year && parseInt(queryParams.year)) || undefined

      getPolicyList(queryParams).then((res) => {
        this.list = res.rows
        this.tableTotal = res.total
        this.loading = false
      })
    },

    resetSearch() {
      this.queryParams.title = undefined
      this.queryParams.level = undefined
      this.queryParams.field = undefined
      this.queryParams.year = undefined
      this.getList(1)
    },
    /* 点击搜索条件后触发处理方法 */
    // 政策级别
    policyLevelItemClick(activeItem) {
      // this.queryParams.policyLevel = activeItem.dictValue
      this.getList()
    },
    // 政策体系
    policySystemItemClick(activeItem) {
      // this.queryParams.policySystem = activeItem.dictValue
      this.getList()
    },
    // 行业领域
    positionItemClick(activeItem) {
      // this.queryParams.domainId = activeItem.dictValue
      this.getList()
    },
    // 发布时间
    yearItemClick(activeItem) {
      // this.queryParams.year = activeItem.dictLabel
      this.getList()
    },
    /* END */

    /* 点击列表内的项目后触发 */
    handleItemClick(item) {
      let managementId = item.managementId
      this.$router.push({ path: '/policy/policyDetail/' + managementId })
    },
    /* END */
  },
}
</script>

<style lang="scss" scoped>
.head-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;

  .big-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .content {
    z-index: 10;
    .big-title {
      font-size: 3.5rem;
      height: 3.5rem;
      line-height: 3.5rem;
      text-align: center;
      margin-bottom: 2rem;
    }
    .input-container {
      margin-bottom: 24px;
      font-size: 18px;

      ::v-deep .el-input-group__append {
        background-color: #f08519 !important;
        border-color: #f08519;
        color: #ffffff;
      }
      ::v-deep .el-input-group {
        width: 650px;
        height: 4rem;

        .el-input__inner {
          width: 500px;
          height: 4rem;
        }
        .el-button {
          width: 150px;
        }
      }
    }
    .sub-title {
      font-size: 24px;
      text-align: center;
    }
  }
}
.content-container {
  & > .content {
    min-width: 1200px;
    width: 1200px;
    margin: auto;
  }
}
.select-container {
  margin-top: 32px;
  background-color: #f6f9ff;
}
.search-container {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-top: 25px;
  background-color: #f6f9ff;

  .search-box {
    width: 560px;
    ::v-deep .el-input-group__append {
      background-color: #409eff;
      cursor: pointer;
    }
    .search-btn {
      background-color: #409eff;
      color: #fff;
    }
  }
}
.info-list {
  background-color: #f6f9ff;
  list-style: none;
  padding: 0 24px;
  margin-top: 24px;

  .item {
    display: block;
    padding: 24px 0;
    cursor: pointer;

    &:not(:last-child) {
      border-bottom: dashed 2px #efefef;
    }

    .head,
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: flex-start;
        .el-tag {
          margin-right: 1rem;
        }
      }

      .right {
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;

        .bold {
          padding: 0 5px;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .head {
      .title {
        width: 700px;
        font-size: 18px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;

        display: -webkit-box;
        overflow: hidden;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-clamp: 4;
      }
    }
    .bottom {
      margin-top: 24px;
      color: #999999;
    }
  }
}
</style>
